<template>
  <div class="index-container">
    <!-- <div class="dashboard-text">name:{{name}}</div>
    <div class="dashboard-text">roles:<span v-for='role in roles' :key='role'>{{role}}</span></div> -->
    <sk-banner />
    <sk-block />
  </div>
</template>

<script>
// import { mapGetters } from 'vuex'
// import { /* Navbar, Sidebar, AppMain*/ SkBanner, SkBlock } from '@/views/layout/components'
import SkBanner from './components/SkBanner'
import SkBlock from './components/SkBlock'

// import { SkBanner, SkBlock } from '@/views/index/components'

export default {
  name: 'Index',
  components: {
    'sk-banner': SkBanner,
    'sk-block': SkBlock
  },
  created() {
    window.isIndex = true
  },
  mounted() {
    // 遮罩层非正常操作处理
    setTimeout(t => {
      document.body.className = 'index1'
      const mask = document.querySelectorAll('.el-loading-mask')
      // if (mask) mask.style.display = 'none'
      if (mask && mask.length) {
        mask.forEach((m, i) => {
          mask[i].style.display = 'none'
        })
      }
      console.warn(mask)
      // clearInterval(inter)
    }, 1000)
  }
  // computed: {
  //     ...mapGetters([
  //         'name',
  //         'roles'
  //     ])
  // },
  // created() {
  //     console.log('roles_permission - index - mapGetters:', this.roles)
  //     console.warn('roles_permission - index - this.$store.getters:', this.$store.getters)
  // }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.index1{
  overflow-y: auto !important;
  .el-loading-mask{
    display: none !important;
  }
}
.div-case, .el-loading-parent--hidden{
  overflow-y: auto !important;
}
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
